<template>
  <a-modal
    title="修改租約-費用清單"
    :width="900"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item v-show="false"><a-input v-decorator="['id']" /></a-form-item>
      </a-form>
           <a-row :gutter="24">
                <a-col :md="24" :sm="24">
                  <a-form-item
                    label="家私配置"
                    :labelCol="labelCol_JG"
                    :wrapperCol="wrapperCol_JG">
                    <a-table
                                size="middle"
                                :columns="columnsJs"
                                :dataSource="jsData"
                                :pagination="false"
                                :loading="memberLoading"
                              >
                              <template slot="price" slot-scope="text, record">
                                    <a-input-number
                                      :min="0"
                                      :max="9999999"
                                      :value="text"
                                      :precision='2'
                                      :step="1"
                                      @change="e => handleChangeJs(e,record.key,'price')" />
                              </template>
                              <template slot="operation" slot-scope="text, record">
                                <a @click="removeJs(record.key)">删除</a>
                              </template>
                      </a-table>
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row  type="flex" justify="space-around" align="middle">
                  <a-col :span="4">
                    <a-button type="primary" size="small" @click="addJs()" >添加家私</a-button>
                  </a-col>
              </a-row>
    </a-spin>
      <add-furniture-form ref="addFurnitureForm" @ok="jshandleOk" />
  </a-modal>
</template>

<script>
  import { getRoomFurnitureListByLeaseId } from '@/api/modular/main/roomfurniture/roomFurnitureManage'
  import { houseLeaseJsEdit } from '@/api/modular/main/houselease/houseLeaseManage'
  import addFurnitureForm from '../busrealestate/addFurnitureForm.vue'
  import moment from 'moment'
  export default {
     components: {
       addFurnitureForm
    },
    data () {
      return {
        // 机构行样式
        labelCol_JG: {
          xs: { span: 24 },
          sm: { span: 3 }
        },
        wrapperCol_JG: {
          xs: { span: 24 },
          sm: { span: 20 }
        },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 15 }
        },
        visible: false,
        confirmLoading: false,
        hydropowerFlag: false,
        form: this.$form.createForm(this),
        memberLoading: false,
        radioStyle: {
          display: 'block',
          height: '30px',
          lineHeight: '30px'
        },
              columnsJs: [
          {
            title: '家私名稱',
            dataIndex: 'name',
            width: '35%',
            scopedSlots: { customRender: 'name' }
          },
          {
            title: '數量',
            dataIndex: 'quantity',
            width: '15%',
            scopedSlots: { customRender: 'quantity' }
          },
          {
            title: '金額',
            dataIndex: 'price',
            width: '40%',
            scopedSlots: { customRender: 'price' }
          },
          {
            title: '操作',
            key: 'action',
            scopedSlots: { customRender: 'operation' }
          }
        ],
        jsData: []
      }
    },
    methods: {
      moment,
      // 初始化方法
      edit (id) {
        this.visible = true
        this.getJsData(id)
        setTimeout(() => {
          this.form.setFieldsValue(
            {
              id: id
            }
          )
        }, 100)
      },
      getJsData(id) {
        this.jsData = []
        getRoomFurnitureListByLeaseId(id).then((res) => {
          if (res.code === 200) {
            this.jsData = res.data
          } else {
            this.$message.error('查詢失敗')//  + res.message
          }
        })
      },
      /**
       * 删除
       */
      removeJs (key) {
        const newData = this.jsData.filter(item => item.key !== key)
        this.jsData = newData
      },
      /**
       * 选择子表单单项触发
       */
      handleChangeJs (value, key, column) {
        const newData = [...this.jsData]
        const target = newData.find(item => key === item.key)
        if (target) {
          target[column] = value
          this.jsData = newData
        }
      },
      addJs() {
        this.$refs.addFurnitureForm.add(this.jsData)
      },
      jshandleOk(param) {
        const selectedRowKeysYjlen = param.length
        if (selectedRowKeysYjlen > 0) {
           for (var i = 0; i < selectedRowKeysYjlen; i++) {
              this.jsData.push({ key: 'NEW' + (this.jsData.length + 1), furnitureid: param[i].furnitureid, disabled: true, name: param[i].name, price: 0.00, quantity: 1 })
           }
        }
      },
      handleSubmit () {
        const { form: { validateFields } } = this
        this.confirmLoading = true
        validateFields((errors, values) => {
          if (!errors) {
            for (const key in values) {
              if (typeof (values[key]) === 'object') {
                values[key] = JSON.stringify(values[key])
              }
            }
            values.jsData = this.jsData
            houseLeaseJsEdit(values).then((res) => {
              if (res.code === 200) {
                this.$message.success('编辑成功')
                this.confirmLoading = false
                this.$emit('ok', '')
                this.handleCancel()
              } else {
                this.$message.error(res.msg)//  + res.message
              }
            }).finally((res) => {
              this.confirmLoading = false
            })
          } else {
            this.confirmLoading = false
          }
        })
      },
      handleCancel () {
        this.form.resetFields()
        this.visible = false
        this.jsData = []
      }
    }
  }
</script>
